<template>
	<div class="content">
			<div class="title">
				推荐科室
				<a href="javascript:;" class="back"  @click="go"></a>
			</div>
			<div class="search_box">
				<div class="search">
					<span class="searchWord">搜索医院，医生，科室，疾病</span>
				</div>
			</div>
			<h2 class="changjian">常见科室</h2>
			<ul class="dept">
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon1.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon2.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon3.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon6.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon4.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon2.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon4.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
				<li class="dept_ist">
					<a class="a">
						<i class="icon" style="background-image: url(/static/img/find/tuijian_icon5.png);"/></i>
						<p class="name">皮肤科</p>
					</a>
				</li>
			</ul>
		</div>
</template>

<script>
	export default {
	  name: 'TuiJian',
	  methods:{
	  	go:function(){
	  		this.$router.push(`/find`);
	  	}
	  }
	}
</script>

<style scoped>
	.content {
  background: #f8f8f8; }
  .content .title {
    text-align: center;
    height: 0.44rem;
    line-height: 0.44rem;
    padding: 0 0.15rem;
    font-size: 0.17rem;
    background: #fff;
    border-bottom: 1px solid #ebecf1;
    position: relative; }
    .content .title .back {
      background: url(/static/img/find/back.png) no-repeat;
      background-size: 100%;
      position: absolute;
      display: block;
      width: 0.2rem;
      height: 0.2rem;
      left: 0.15rem;
      top: 0.14rem; }
  .content .search_box {
    background: #fff;
    padding: 0.08rem 0.15rem; }
    .content .search_box .search {
      background: #f8f8f8;
      color: #A6A8B6;
      border-radius: 20px;
      height: 0.32rem;
      line-height: 0.32rem;
      padding-left: 0.1rem; }
      .content .search_box .search .searchWord {
        font-size: 0.12rem;
        background: url(/static/img/find/magnifier.png) left center no-repeat;
        background-size: 0.14rem 0.14rem;
        padding-left: 0.2rem; }
  .content .changjian {
    padding: 0 0.15rem;
    line-height: 0.41rem;
    color: #83889a; }
  .content .dept {
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #eee; }
    .content .dept .dept_ist {
      float: left;
      width: 25%;
      border-right: 1px solid #eee;
      margin-right: -1px;
      border-bottom: 1px solid #eee; }
      .content .dept .dept_ist .a {
        display: block;
        padding: 0.14rem 0; }
      .content .dept .dept_ist .icon {
        display: block;
        margin: 0 auto 0.1rem;
        width: 36%;
        padding-bottom: 36%;
        background-size: 100% 100%; }
      .content .dept .dept_ist .name {
        font-size: 0.09rem;
        color: #83889a;
        text-align: center; }

</style>